<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
  <th:block th:include="include :: header('新增项目')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
  <form class="form-horizontal m" id="form-projectInfo-add">
    <input name="deptId" type="hidden" id="treeId"/>
    <input name="progressCode" type="hidden" value="1"/>
    <div class="form-group">
      <label class="col-sm-3 control-label"><span style="color: red; ">*</span>客户名称：</label>
      <div class="col-sm-8">
        <div class="input-group">
          <input name="deptName" onclick="selectDeptTree()" id="treeName" type="text" placeholder="请选择客户公司名称" class="form-control" readonly="readonly" required>
          <span class="input-group-addon"><i class="fa fa-search"></i></span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div class="form-group">
          <label class="col-sm-3 control-label"><span style="color: red; ">*</span>项目名称：</label>
          <div class="col-sm-8">
            <input name="projectName" type="text" class="form-control" maxlength="50" required>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label"><span style="color: red; ">*</span>项目所在地：</label>
      <div class="col-sm-9">
        <div class="form-group">
          <div data-toggle="distpicker">
            <div class="col-xs-4"><select class="form-control" name="province_id" id="province_id" required></select></div>
            <div class="col-xs-4"><select class="form-control" name="city_id" id="city_id" required></select></div>
            <div class="col-xs-4"><select class="form-control" name="zone_id" id="zone_id" required></select></div>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label"><span style="color: red; ">*</span>详细地址：</label>
      <div class="col-sm-8">
        <input id="address" name="address" class="form-control" type="text" maxlength="100" required>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label"><span style="color: red; ">*</span>污水所属行业：</label>
      <div class="col-sm-8">
        <select name="sewageType" class="form-control m-b required" th:with="type=${@dict.getType('sewage_type')}" >
          <option value="">--请选择--</option>
          <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label"><span style="color: red; ">*</span>设计进水量（t/d）：</label>
      <div class="col-sm-8">
        <input name="designIntake" class="form-control" type="text" maxlength="8" required>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label"><span style="color: red; ">*</span>实际进水量（t/d）：</label>
      <div class="col-sm-8">
        <input name="actualIntake" class="form-control" type="text" maxlength="8" required>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label"><span style="color: red; ">*</span>项目金额（元）：</label>
      <div class="col-sm-8">
        <input name="projectPrice" class="form-control digits" type="text" maxlength="9" required>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label"><span style="color: red; ">*</span>技术服务费（元）：</label>
      <div class="col-sm-8">
        <input name="techPrice" class="form-control digits" type="text" maxlength="9" required>
      </div>
    </div>
  </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: distpicker-js" />
<script type="text/javascript">
  var prefix = ctx + "project/projectInfo"
  $("#form-projectInfo-add").validate({
    focusCleanup: true
  });

  function submitHandler() {
    if ($.validate.form()) {
      var data = $("#form-projectInfo-add").serializeArray();
      var _province = $("#province_id  option:selected");
      var _city = $("#city_id  option:selected");
      var _zone = $("#zone_id  option:selected");
      data.push({"name": "provinceId", "value": _province.data('code')});
      data.push({"name": "provinceName", "value": _province.val()});
      data.push({"name": "cityId", "value": _city.data('code')});
      data.push({"name": "cityName", "value": _city.val()});
      data.push({"name": "zoneId", "value": _zone.data('code')});
      data.push({"name": "zoneName", "value": _zone.val()});
      $.operate.save(prefix + "/add", data);
    }
  }

  function selectDeptTree() {
    var treeId = $("#treeId").val();
    var deptId = $.common.isEmpty(treeId) ? "106" : $("#treeId").val();
    var url = ctx + "system/dept/selectDeptTree/" + deptId;
    var options = {
      title: '选择客户公司名称',
      width: "380",
      url: url,
      callBack: doSubmit
    };
    $.modal.openOptions(options);
  }

  function doSubmit(index, layero){
    var tree = layero.find("iframe")[0].contentWindow.$._tree;
    if ($.tree.notAllowParents(tree)) {
      var body = layer.getChildFrame('body', index);
      $("#treeId").val(body.find('#treeId').val());
      $("#treeName").val(body.find('#treeName').val());
      $("#treeName").valid();
      layer.close(index);
    }
  }
</script>
</body>
</html>